<template>
    <up-image
        :src="img || IMAGES_URL + src"
        :mode="mode"
        :lazy-load="lazyLoad"
        :radius="radius"
        :height="height"
        :width="width"
        :fade="fade"
        :show-menu-by-longpress="showMenuByLongpress"
        :show-loading="showLoading"
        @click="handleClick"
    >
        <!-- 图片正在加载中的占位图标显示，以防图片处过于空白 -->
        <template #loading>
            <view class="big center" v-if="isLoad">
                <up-icon name="photo" size="20px" color="#aaa"></up-icon>
            </view>
        </template>
        <template #error>
            <view class="big center">
                <!-- 错误图片图标，如果有自己的logo可以替换成自己的logo -->
                <!-- <up-icon name="photo-fill" size="20px" color="#ccc"></up-icon> -->
                <image class="big" style="max-width: 120rpx;" :src="IMAGES_URL + 'no-img.png'" mode="aspectFit"></image>
            </view>
        </template>
    </up-image>
</template>

<script setup>
/**
 * @description 基于uview中的up-image组件二次封装,增加点击预览和可区分填入oss库和网络图片地址的功能
 * @author yinzhi
 * @date 2025-03-05
 * @param { String } img 网络图片地址(主要是接口返回) 如 https://pic.png
 * @param { String } src 固定oss库图片名(需要带后缀)如 pic.png
 * @param { String } mode 默认值：aspectFill 裁剪模式 具体查看uniapp图片组件说明 https://uniapp.dcloud.
 net.cn/component/image.html
 * @param { String | Number } radius 圆角，默认单位px
 * @param { String | Number } width 默认值：100rpx 宽度，单位任意，如果为数值，默认单位px
 * @param { String | Number } height 默认值：100rpx 高度，单位任意，如果为数值，默认单位px
 * @param { Boolean } lazyLoad 默认值：false 是否懒加载
 * @param { Boolean } fade 默认值：false 是否需要淡入效果
 * @param { Boolean } showLoading true 是否显示加载中的图标
 * @param { Boolean } showMenuByLongpress 默认值：false 是否开启长按图片显示识别小程序码菜单，仅微信小程
 * @param { Boolean } isPreview 是否可以预览图片，默认false
 * @param { Boolean } showPreviewMenu 默认值：false 是否开启长按显示预览菜单 仅支持微信小程序
 * @param { Array } previewImagesList 预览图片列表，默认[]，仅在isPreview为true时有效
 * @param { Boolean } isLoad 是否显示图片加载中图标，默认true
 序有效
 * @param { Function } click 图片点击事件 子组件向父组件传值
 * 示例:
 * <hj-image src="pic.jpg" @click="handleImageClick" />
 */
import { IMAGES_URL } from '@/libs/common/baseUrl.js'
import props from './props'

// 定义 props
const {
    img,
    src,
    mode,
    radius,
    width,
    height,
    lazyLoad,
    fade,
    showLoading,
    showMenuByLongpress,
    isPreview,
    previewImagesList,
    showPreviewMenu,
    isLoad
} = defineProps(props)

// 定义事件
const emit = defineEmits(['click'])

// 图片点击事件
const handleClick = evt => {
    if (isPreview) {
        // 预览图片事件
        uni.previewImage({
            showmenu: showPreviewMenu, //微信小程序专有
            current: img || IMAGES_URL + src,
            urls: previewImagesList.length > 0 ? previewImagesList : [img || IMAGES_URL + src]
        })
    }
    emit('click', evt)
}
</script>
